<template>
    <div class="container" style="padding: 10px">
        <el-card>
            <div class="clearfix" slot="header">试题录入</div>
            <el-form :model="form" :rules="formRules" class="el-card__body" label-width="80px" ref="form">
                <el-form-item label="学科:" prop="discipline">
                    <el-select @change="directory_clear" placeholder="请选择" style="width: 450px" v-model="form.discipline">
                        <el-option :key="index" :label="item.label" :value="item.value" v-for="(item, index) in Subject_data"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="目录:" prop="simple_directory">
                    <el-select placeholder="请选择" style="width:450px" v-model="form.simple_directory">
                        <el-option :key="index" :label="item.label" :value="item.value" v-for="item,index in simple_directory1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业:" prop="enterprise">
                    <el-select placeholder="请选择" style="width: 450px" v-model="form.enterprise">
                        <el-option :key="index" :label="item.company" :value="item.id" v-for="(item, index) in enterprise"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="城市:" prop="city">
                    <el-select @change="city_change" placeholder="请选择" v-model="form.city">
                        <el-option :key="index" :label="item" :value="item" v-for="(item, index) in the_city"></el-option>
                    </el-select>&nbsp;
                    <el-select placeholder="请选择" v-model="form.area">
                        <el-option :key="index" :label="item" :value="item" v-for="(item, index) in the_area"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="方向:" prop="direction">
                    <el-select placeholder="请选择" style="width: 450px" v-model="form.direction">
                        <el-option :key="index" :label="item" :value="item" v-for="(item, index) in direction"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="题型:" prop="questionType_radio">
                    <el-radio :key="index" :label="item.value" v-for="(item, index) in questionType" v-model="questionType_radio">{{ item.label }}</el-radio>
                </el-form-item>
                <el-form-item label="难度:" prop="difficulty_radio">
                    <el-radio :key="index" :label="item.value" v-for="(item, index) in difficulty" v-model="difficulty_radio">{{ item.label }}</el-radio>
                </el-form-item>
                <el-form-item label="题干:" prop="question_stem">
                    <quillEditor :options="editorOption" @blur="onEditorBlur" class="editor" ref="myLQuillEditor" v-model="form.question_stem"></quillEditor>
                </el-form-item>
                <el-form-item label="选项:" v-if="questionType_radio===1">
                    <el-row :key="index" justify="start" type="flex" v-for="item,index in 单选">
                        <el-col style="margin-right: 30px;width:100%;height:60px ;line-height: 60px;">
                            <el-radio :label="item.code" v-model="list123123">
                                {{item.code}}:
                                <el-input style="width:267px;" v-model="item.title"></el-input>
                            </el-radio>
                        </el-col>
                        <el-col>
                            <!-- 图片组件 -->
                            <subjectsAdd v-model="item.img"></subjectsAdd>
                        </el-col>
                        <el-col style="width:3000px" />
                    </el-row>
                </el-form-item>
                <!-- [{ isRight: false, code: 'A', title: '', img: '' }, { isRight: false, code: 'B', title: '', img: '' }], -->
                <el-form-item label="选项:" style v-if="questionType_radio===2">
                    <el-row :key="index" justify="start" type="flex" v-for="item,index in list12345487979">
                        <el-col style="margin-right: 30px;width:100%;height:60px ;line-height: 60px;">
                            <el-checkbox :label="item.code" v-model="more_list">
                                {{item.code}}:
                                <el-input style="width:267px;" v-model="item.title"></el-input>
                            </el-checkbox>
                        </el-col>
                        <el-col>
                            <!-- 图片组件 -->
                            <subjectsAdd v-model="item.img"></subjectsAdd>
                        </el-col>
                        <el-col style="width:3000px" />
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button :disabled="questionType_radio===1" @click="add_options" type="danger" v-if="questionType_radio!==3">+增加选项与答案</el-button>
                </el-form-item>

                <el-form-item label="解析视频:" label-width="88px">
                    <el-input style="width: 450px" v-model="form.Parsing_video"></el-input>
                </el-form-item>
                <el-form-item label="答案解析:" label-width="88px" prop="answer_analysis">
                    <quillEditor :options="editorOption1" @blur="onEditorBlur1" class="editor" ref="myLQuillEditor" v-model="form.answer_analysis"></quillEditor>
                </el-form-item>
                <el-form-item label="题目备注:" label-width="88px">
                    <el-input placeholder style="width: 450px" type="textarea" v-model="textarea"></el-input>
                </el-form-item>
                <el-form-item label="试题标签:" label-width="88px">
                    <el-select multiple placeholder="请选择试题标签" style="width: 450px" v-model="form.question_label" value-key="index">
                        <el-option :key="index" :label="item.label" :value="item.label" v-for="item,index in question_label1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click.native.prevent="handleSure" style="margin-top: 30px" type="success">确认提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import subjectsAdd from '../components/subjects-add.vue'

import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import { provinces, citys } from '@/api/hmmm/citys'
import { quillEditor } from 'vue-quill-editor'
import { list } from '@/api/hmmm/companys'
import { createAPI } from '@/utils/request'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 工具栏配置项
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线
  ['bold', 'italic', 'underline', 'strike'],
  // 有序','无序列表
  [{ list: 'ordered' }, { list: 'bullet' }],
  // 引用  代码块-----['blockquote', 'code-block']
  ['blockquote', 'code-block'],
  // 链接','图片','视频-----['link', 'image', 'video']
  ['image', 'video']
]
export default {
  components: {
    // 富文本
    quillEditor,
    // 图片
    subjectsAdd
  },
  data () {
    return {
      // 题干
      editorOption: {
        content: '',
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: ''
      },
      // 解析答案
      editorOption1: {
        content: '',
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: ''
      },
      form: {
        // 题干
        question_stem: '',
        // 答案解析
        answer_analysis: '',
        // 学科
        discipline: '',
        // 企业
        enterprise: '',
        // 市
        city: '',
        // 区
        area: '',
        // 方向
        direction: '',
        // 试题标签
        question_label: [],
        // 目录
        simple_directory: '',
        // 解析视频
        Parsing_video: ''
      },
      formRules: {
        discipline: [{ required: true, trigger: 'blur', message: '请选择学科' }],
        simple_directory: [{ required: true, trigger: 'blur', message: '请选择目录' }],
        enterprise: [{ required: true, trigger: 'blur', message: '请选择企业' }],
        city: [{ required: true, trigger: 'blur', message: '请选择地区' }],
        direction: [{ required: true, trigger: 'blur', message: '请选择方向' }],
        // questionType_radio: [{ required: true, trigger: 'click', message: ' ' }],
        // difficulty_radio: [{ required: true, trigger: 'click', message: ' ' }],
        question_stem: [{ required: true, trigger: 'blur', message: '请输入题干' }],
        answer_analysis: [{ required: true, trigger: 'blur', message: '请输入题干' }]
      },

      // 题型
      questionType: '',
      // 难度
      difficulty: '',
      // 方向
      direction: [],
      // 学科简单列表
      Subject_data: [],
      // 市
      the_city: [],
      // 区
      the_area: [],
      // 企业
      enterprise: [],
      // 难度单选框
      difficulty_radio: 1,
      // 题型单选框
      questionType_radio: 1,
      // 题目备注
      textarea: '',
      // 学科id
      subjectID: '',
      // 试题标签
      question_label1: [],
      // 目录
      simple_directory1: [],
      //
      list12345487979: [
        { isRight: false, code: 'A', title: '', img: '' },
        { isRight: false, code: 'B', title: '', img: '' },
        { isRight: false, code: 'C', title: '', img: '' },
        { isRight: false, code: 'D', title: '', img: '' }
      ],
      单选: [
        { isRight: false, code: 'A', title: '', img: '' },
        { isRight: false, code: 'B', title: '', img: '' },
        { isRight: false, code: 'C', title: '', img: '' },
        { isRight: false, code: 'D', title: '', img: '' }
      ],
      //
      list3366: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      // 单选
      list123123: '',
      // 多选
      more_list: [],
      // 保存修改后的值
      modify_data: {},
      // 图片地址
      imageUrl: ''
    }
  },
  watch: {
    simple_directory1 () {
      if (!this.simple_directory1.length) {
        this.form.simple_directory = ''
      }
    },
    form: {
      handler (newName, oldName) {
        // console.log(newName.discipline)
        this.directory_function()
        this.citys()
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    // 题型
    this.questionType = questionType
    // 难度
    this.difficulty = difficulty
    // 方向
    this.direction = direction
    // 市
    this.provinces()
    // 区
    // this.citys()
    // 学科简单列表
    this.simple()
    // 企业
    this.list()
    // 判断
    if (this.$route.query.id) {
      this.questions()
    }
  },

  methods: {
    // 学科简单列表
    async simple () {
      const { data } = await simple()
      this.Subject_data = data
    },

    // 市
    async provinces () {
      const res = await provinces()
      this.the_city = res
    },

    // 区
    async citys () {
      const res = await citys(this.form.city)
      this.the_area = res
    },

    // 市 --- 发生改变
    city_change () {
      if (this.form.city) {
        this.citys()
      }
    },

    // 企业
    async list () {
      const {
        data: { items }
      } = await list({
        pagesize: 10000
      })
      this.enterprise = items
      //   console.log(items)
    },

    // 确认提交
    handleSure () {
      this.$refs.form
        .validate()
        .then(async () => {
          if (this.$route.query.id) {
            this.modify_data.options = this.list12345487979
            this.modify_data.answer = this.form.answer_analysis
            this.modify_data.catalogID = +this.form.simple_directory
            this.modify_data.city = this.form.area
            this.modify_data.difficulty = String(this.difficulty_radio)
            this.modify_data.direction = this.form.direction
            this.modify_data.enterpriseID = this.form.enterprise
            this.modify_data.province = this.form.city
            this.modify_data.question = this.form.question_stem
            this.modify_data.questionType = String(this.questionType_radio)
            this.modify_data.subjectID = +this.form.discipline
            this.modify_data.remarks = this.textarea
            this.modify_data.videoURL = this.form.Parsing_video
            this.modify_data.tags = this.form.question_label.join(',')
            if (this.questionType_radio === 1) {
              this.modify_data.options = this.单选
              this.modify_data.options.forEach((item) => {
                if (this.list123123 === item.code) {
                  item.isRight = true
                } else {
                  item.isRight = false
                }
              })
            } else {
              this.modify_data.options = this.list12345487979
              this.modify_data.options.forEach((item) => {
                if (this.more_list.includes(item.code)) {
                  item.isRight = true
                } else {
                  item.isRight = false
                }
              })
            }
            const res = await createAPI(`/questions/${this.$route.query.id}`, 'PUT', this.modify_data)
            console.log(res)
            await this.$message.success('试题修改成功')
            if (this.$route.query.type) {
              this.$router.push('/questions/choice')
            } else {
              this.$router.push('/questions/list')
            }
          } else {
            const listData = {
              answer: this.form.answer_analysis,
              catalogID: +this.form.simple_directory,
              city: this.form.area,
              difficulty: String(this.difficulty_radio),
              direction: this.form.direction,
              enterpriseID: this.form.enterprise,
              options: this.list12345487979,
              // options: [{ isRight: false, code: 'A', title: '', img: '' }, { isRight: false, code: 'B', title: '', img: '' }],
              province: this.form.city,
              question: this.form.question_stem,
              questionType: String(this.questionType_radio),
              subjectID: +this.form.discipline,
              remarks: this.textarea,
              videoURL: this.form.Parsing_video,
              tags: this.form.question_label.join(',')
            }
            // if (this.questionType_radio === 1) {
            //   listData.options = this.单选
            // }
            if (this.questionType_radio === 1) {
              listData.options = this.单选
              this.单选.forEach((item) => {
                if (this.list123123 === item.code) {
                  item.isRight = true
                }
              })
            } else {
              listData.options = this.list12345487979
              this.list12345487979.forEach((item) => {
                if (this.more_list.includes(item.code)) {
                  item.isRight = true
                }
              })
            }
            const res = await createAPI('/questions', 'post', listData)
            await this.$message.success('试题录入成功')
            this.$router.push('/questions/list')
            console.log(res)
          }
        })
        .catch((error) => {
          console.log(error)
          this.$message.error('录入失败请重试')
        })
    },

    // 目录清空
    directory_clear () {
      this.question_label()
      //   this.directory_function()
    },

    // 试题标签
    async question_label () {
      const list = {
        subjectID: this.form.discipline
      }
      const { data } = await createAPI('/tags/simple', 'get', list)
      //   console.log(data)
      this.question_label1 = data
    },

    // 目录
    async directory_function () {
      const list = {
        subjectID: this.form.discipline
      }
      const { data } = await createAPI('/directorys/simple', 'get', list)
      this.simple_directory1 = data
    },

    //
    async questions () {
      const list = {
        id: this.$route.query.id
      }
      const { data } = await createAPI(`/questions/${list.id}?id=${list.id}`, 'get', list)
      this.modify_data = data
      this.form.discipline = +data.subjectID
      const res = await createAPI('/directorys/simple', 'get', {
        subjectID: +data.subjectID
      })
      this.form.simple_directory = data.directoryName
      if (typeof this.form.simple_directory === 'string') {
        // console.log(res.data)
        res.data.forEach((item) => {
          if (this.form.simple_directory === item.label) {
            this.form.simple_directory = item.value
          }
        })
      }
      this.form.direction = data.direction
      this.form.enterprise = +data.enterpriseID
      this.form.city = data.province
      this.form.area = data.city
      this.questionType_radio = +data.questionType
      this.difficulty_radio = +data.difficulty
      this.form.question_stem = data.question
      this.form.answer_analysis = data.answer
      this.textarea = data.remarks
      this.form.Parsing_video = data.videoURL
      this.list12345487979 = []
      this.单选 = []
      if (this.questionType_radio === 1) {
        for (var i = 0; i < data.options.length; i++) {
          data.options.forEach((item) => {
            if (item.code === this.list3366[i]) {
              this.单选.push(item)
            }
          })
        }
        this.单选.forEach((item) => {
          if (item.isRight) {
            this.list123123 = item.code
          }
        })
        this.list12345487979 = [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ]
      } else {
        for (var l = 0; l < data.options.length; l++) {
          data.options.forEach((item) => {
            if (item.code === this.list3366[l]) {
              this.list12345487979.push(item)
            }
          })
        }
        this.list12345487979.forEach((item) => {
          if (item.isRight) {
            this.more_list.push(item.code)
          }
        })
        this.单选 = [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ]
      }

      //   if (this.questionType_radio === 1) {
      //     this.list12345487979.forEach((item) => {
      //       if (item.isRight) {
      //         this.list123123 = item.code
      //       }
      //     })
      //   } else {
      //     this.list12345487979.forEach((item) => {
      //       if (item.isRight) {
      //         this.more_list.push(item.code)
      //       }
      //     })
      //   }
      //   answer
      //   this.form.question_label.push(data.tags)
      if (data.tags) {
        this.form.question_label.push(data.tags)
      }
      // console.log(data)
    },

    //
    add_options () {
      if (this.list3366[0] === 'A') {
        const a = this.list12345487979.length
        this.list3366.splice(0, a)
      }
      if (this.list3366[0]) {
        this.list12345487979.push({ isRight: false, code: this.list3366[0], title: '', img: '' })
        this.list3366.shift()
      } else {
        alert(666)
      }
    },

    // 富文本校验  --- 题干
    onEditorBlur () {
      this.$refs.form.validateField('question_stem')
    },

    // 富文本校验  --- 解析答案
    onEditorBlur1 () {
      this.$refs.form.validateField('answer_analysis')
    }
  }

}

</script>

<style>
.container {
    padding: 15px;
}
.Item_entry {
    padding: 10px 20px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
}
.el-card__body {
    padding: 20px;
}
.editor {
    height: 100%;
}
.ql-container {
    height: 180px;
}
/* .avatar-uploader{
    display: inline-block;
 } */
</style>
